<template>
  <div class="promotion-page">
    <div class="chose-board">
      <div class="promBtn">
        <van-button
          style="border-radius: 0.2rem"
          color="linear-gradient(to right, #b267f4, #6953f7)"
          @click="linkToPromotion"
          >晋级表({{promotedNum}})</van-button
        >
      </div>
      <div class="chose-tabs">
        <div
          class="tabsInfo"
          :style="{ background: tabBackColor === '' ? '#5b55ff' : '#32324e' }"
          @click="choseTabs('')"
        >
          <p class="tInfoTop">总览</p>
          <p>{{judgeList.filter(item=>item.status==2).length}} / {{ judgeList.length }}</p>
        </div>
        <div
          class="tabsInfo"
          @click="choseTabs(index)"
          v-for="(item, index) in judgeList"
          :key="index"
          :style="{
            background: tabBackColor === index ? '#5b55ff' : '#32324e',
          }"
        >
          <p class="tInfoTop">{{ item.name }}</p>
          <p :class="['tabStatus', 'itemType_' + item.status]">
            {{ navStatus[item.status] }}
          </p>
        </div>
      </div>
    </div>
    <div class="list" style="height: 350px">
      <tableCom
        :data="data"
        :column="column"
        :operatesCol="tabBackColor === '' ? [] : operatesCol"
      >
        <template slot="setInfo" v-if="tabBackColor === ''" scope="{row}">
          <div :class="['table-com-td', 'item-option' ]">

            <div :class="['btn-common',row.isPromotion===1?'no-click-btn':'can-click-btn' ]" @click="promotionBtn(row)">{{ row.isPromotion===1?'已晋级':'晋级' }}</div>
            
          </div>
        </template>
      </tableCom>
    </div>
    <div class="homeBtn">
      <van-button
        style="width: 49%; height: 7.5vh; border-radius: 0.3rem"
        color="linear-gradient(to right, #b267f4, #6953f7)"
        @click="reGet"
        >刷新</van-button
      >
      <van-button
        style="width: 49%; height: 7.5vh; border-radius: 0.3rem"
        @click="toShare"
        color="linear-gradient(to right, #5c79f7, #5c74f4)"
        >分享</van-button
      >
    </div>
  </div>
</template>

<script>
import tableCom from "@/components/tableCom.vue";
import {
  scoreJudge,
  scoreUserScore,
  scorePanelscoreRecord,
  promotionById
} from "@/apis/score";
export default {
  name: "PromotionPage",
  components: { tableCom },
  data() {
    return {
      promotedNum: 0,
      navStatus: ["待打分", "待提交", "已提交", "已完成"],
      tabBackColor: "",
      judgeList: [],
      data: [],
      column: [
        {
          label: "号码牌",
          prop: "number",
          width: 100,
          isSort: true, // 是否可排序
          SortFun: this.SortCardFun, //排序方法
          SortType: true, //排序状态
          canChange: false, //是否可切换成input框
        },
        {
          label: "总分",
          prop: "score",
          isSort: true,
          SortFun: this.SortAllFun,
          SortType: true,
          canChange: true,
        },
      ],
      operatesCol: [
        {
          name: "修改",
          isShowName: false,
          icon: "records",
          methods: (row) => {
            this.$set(row, "isChange", !row.isChange);
            // row.isChange = !row.isChange
            console.log(row);
          },
        },
        {
          name: "删除",
          isShowName: false,
          icon: "delete",
          methods: (row) => {
            console.log(row);
          },
        },
      ],
    };
  },
  methods: {
    // 获取所有裁判信息
    async getJudges() {
      const id = this.$route.query.id;
      const res = await scoreJudge(id);
      this.judgeList = res.result;
    },
    // 获取所有数据信息
    async getScoreUserScore() {
      const res = await scoreUserScore(this.$route.query.id,{sort:3});
      this.data = res.result.data;
      this.promotedNum = this.data.filter(v => v.isPromotion === 1).length
    },
    // 获取单个裁判的数据信息
    async getScorePanelscoreRecord(item) {

      let params = {
        scoreProjectId: Number(this.$route.query.id),
        scoreJudgeId: item.scoreJudgeId,
      };
      const res = await scorePanelscoreRecord(params); 
       this.data = res.result;
    },
    // 跳转晋级表
    linkToPromotion() {
      this.$emit("showPromotion", true);
    },
    choseTabs(index) {
      this.tabBackColor = index;
      this.getJudges();
      if (index === "") {
        this.getScoreUserScore();
        return;
      }
      this.getScorePanelscoreRecord(this.judgeList[index]);
    },
    SortCardFun(list, item) {
      item.SortType = !item.SortType;
      this.data = list.sort((a, b) => {
        if (item.SortType) {
          return a.card > b.card ? 1 : -1;
        } else {
          return a.card < b.card ? 1 : -1;
        }
      });
    },
    SortAllFun(list, item) {
      item.SortType = !item.SortType;
      this.data = list.sort((a, b) => {
        if (item.SortType) {
          return a.all > b.all ? 1 : -1;
        } else {
          return a.all < b.all ? 1 : -1;
        }
      });
      console.log(this.data);
    },
    toShare() {
      this.$router.push({
        path: "/scoring/shareBorad",
        query: {},
      });
    },
    promotionBtn(row){
      if(row.isPromotion === 1) return 
        this.$dialog.confirm({
        title: `确认海选号码牌：${row.number}号晋级？`,
        message: `晋级后不能再更改`,
      })
        .then(async () => {
          const res = await promotionById(row.id)
          this.$toast.success('晋级成功')
				  this.getScoreUserScore()
        })
        .catch(() => {
          // on cancel
        });
    },
    //刷新按钮
    reGet(){
    this.getJudges();
    if(this.tabBackColor === ''){
      this.getScoreUserScore();
    }else{
      this.getScorePanelscoreRecord(this.judgeList[this.tabBackColor]);
    }
    }
  },
  mounted() {
    this.getJudges();
    this.getScoreUserScore();
    this.timer = setInterval(()=>{
        this.reGet()
    },1000)
  },
  destroyed(){
    clearInterval(this.timer)
  }
};
</script>

<style lang="less" scoped>
.promotion-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 5px 10px;

  .chose-board {
    padding: 0 0.4rem;
    .promBtn {
      margin-bottom: 0.3rem;
    }
    .chose-tabs {
      display: flex;
      .tabsInfo {
        background: #32324e;
        padding: 0.2rem;
        border-radius: 0.05rem;
        width: 2rem;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.2rem;
        margin-right: 0.3rem;
        .tInfoTop {
          margin-bottom: 0.2rem;
        }
        .tabStatus {
          border-radius: 0.2rem;
          width: 80%;
          margin: auto;
        }
        .itemType_2,
        .itemType_3 {
          background-color: rgba(15, 122, 113, 0.32);
          color: rgba(79, 255, 170, 1);
        }
        .itemType_1 {
          background-color: rgba(122, 77, 12, 0.24);
          color: rgba(255, 200, 63, 1);
        }
        .itemType_0 {
          background-color: rgba(2, 44, 122, 0.24);
          color: rgba(13, 153, 255, 1);
        }
      }
    }
  }

  .homeBtn {
    background: #27283d;
    height: 12vh;
    padding: 0 0.2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
